<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%@ include file="/commons/meta.jsp"%>
<title>密码修改,初学者论坛,BeginCode,beginCode</title>
<!-- Bootstrap -->
	<link href="${ctx}/css/bootstrap.css" rel="stylesheet">
	<script charset="utf-8" src="${ctx}/kindeditor/kindeditor.js"></script>
	<script charset="utf-8" src="${ctx}/kindeditor/lang/zh_CN.js"></script>
	 <script src="${ctx}/js/jquery.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
//初始化编辑器  K.create("#demoEditor" )  中demoEditor 为文本编辑器的id

	var editor;
	KindEditor.ready(function(K){
		editor = K.create("#blogContent",{
			cssPath:'${ctx}/kindeditor/plugins/code/ke.css',
			items : [
						'fontname', 'fontsize', '|', 'forecolor', 'code','hilitecolor', 'bold', 'italic', 'underline',
						'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						'insertunorderedlist', '|', 'emoticons' ,'|', 'link','|', 'image','|', 'table'],
						afterChange:function(){
							//文字变更，去掉错误提示
							$("#bcContent").find(".formtips").remove();
						}
		});

	});
	function getHtmlNote(areaId){
		//获取html内容，areaId 为文本编辑的id
		editor.sync();
		var ht = document.getElementById(areaId).value;
	}
//设置文本编辑器的内容
	function setHtmlNote(note){
		editor.html(note);
//editor　和初始化文本编辑器的名字相对应
	}

</script>
<style type="text/css">

.bs-callout {
	padding: 20px;
	margin: 20px 0;
	border: 1px solid #eee;
	border-left-width: 5px;
	border-radius: 3px
}

.bs-callout h4 {
	margin-top: 0;
	margin-bottom: 5px
}

.bs-callout p:last-child {
	margin-bottom: 0
}

.bs-callout code {
	border-radius: 3px
}

.bs-callout+.bs-callout {
	margin-top: -5px
}

.bs-callout-danger {
	border-left-color: #d9534f
}

.bs-callout-danger h4 {
	color: #d9534f
}

.bs-callout-warning {
	border-left-color: #f0ad4e
}

.bs-callout-warning h4 {
	color: #f0ad4e
}

.bs-callout-info {
	border-left-color: #5bc0de
}

.bs-callout-info h4 {
	color: #5bc0de
}
.bs-docs-header {
	position: relative;
	padding: 30px 15px;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 0 rgba(0,0,0,.1);
	background-color: #3071a9;
	background-repeat: repeat-x;
}

.bs-docs-header {
	margin-bottom: 40px;
	font-size: 20px
}

.bs-docs-header h1 {
	margin-top: 0;
	color: #fff;
}

.bs-docs-header p {
	margin-bottom: 0;
	font-weight: 300;
	line-height: 1.4;
}

.bs-docs-header .container {
	position: relative;
}
.container h1 {
	margin-top: 0;
	color: #fff;
	text-align: left;
	font-weight:bold;
}
.container p {
	text-align: left;
}
.bs-docs-footer {
	margin-top: 0;
	border-top: 0
}

.bs-docs-footer {
	padding-top: 40px;
	padding-bottom: 20px;
	color: #777;
	text-align: center;
	border-top: 1px solid #e5e5e5
}

.bs-docs-footer-links {
	padding-left: 0;
	margin-top: 20px;
	color: #999
}

.bs-docs-footer-links li {
	display: inline;
	padding: 0 2px
}

.bs-docs-footer-links li:first-child {
	padding-left: 0
}

@media (min-width:768px) {
	.bs-docs-footer p {
		margin-bottom: 0;
		text-align: center;
	}
}


</style>
</head>
<body style="background-color: #f8f8f8;">
	<jsp:include  page="top.jsp"/>
	
<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">空间管理</a></li>
  <li class="active">修改密码</li>
</ol>
     
	
	<div class="container .col-xs-" style="margin-top:20px" >
		<div class="row" >
		<div class="col-md-3">
		<div class="panel panel-primary" style="margin-bottom:10px" >
			<div class="panel-body" >
						<div class="media" style="margin-bottom:10px">
						  <a class="media-left" href="#">
						    <img src="${ctx}/images/girl.jpg" style="width:80px;height:80px;" alt="...">
						  </a>
						  <div class="media-body">
						    <h2 class="media-heading" id="nickName" style="color:#EA0000"></h2>
						    <!-- 	修改资料 更改头像
						 -->
						  </div>
						</div>
					   <!--   <ul class="nav nav-pills" role="tablist">
					   
						  	<li role="presentation" class="active"><a href="#">积分 <span class="badge">42</span></a></li>&nbsp;&nbsp;
						    <li role="presentation" class="active"><a href="#">课程 <span class="badge">2</span></a></li>
						</ul> -->
			</div>
		</div>
		 
			<button type="button" class="btn btn-primary" id="addBlog" data-toggle="button" aria-pressed="false" autocomplete="off" style="border-radius: 0px;width:100%;height:60px;margin-bottom:10px;font-weight:bold;font-size:35px">
			  发布博文
			</button>
			 
						 <div class="list-group" id="classList">
							<a href="#" class="list-group-item active"> 博客分类 </a>  
						</div>
						  <div class="list-group" id="readList">
							<a href="#" class="list-group-item active"> 阅读排行 </a>  
						</div>
					</div>
					
					<div class="col-md-9" >
<div class="panel panel-primary" style="margin-top:0;" >
		<div class="panel-body">
<form role="form" id="blogForm" action="${ctx}/user/updPassword" method="post">
  <div class="form-group">
    <label for="exampleInputEmail1"><span class="labelinfowarn" ></span>原密码</label>
    <input type="password" class="form-control required" id="oldPwd" name="oldPwd" value="" placeholder="请输入原密码">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1" ><span class="labelinfosuccess" ></span>新密码</label>
    <input type="password" class="form-control required" id="pwd" name="pwd" value="" placeholder="请输入新密码">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1"><span class="labelinfoblue" ></span>确认密码</label>
    <input type="password" class="form-control required" id="repwd" name="repwd" value="" placeholder="请再次输入新密码">
  </div>

   <div style="margin-top:10px;text-align:center;">
   <button type="button" class="btn btn-primary" id="send" style="width:100px;">提交</button>  
   </div>
</form>
								</div>

							  </div>
					</div>
					
			 </div>
			

	</div> <jsp:include page="foot.jsp"></jsp:include>

<script src="${ctx}/js/md5.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="${ctx}/js/bootstrap.min.js"></script>
 <script type="text/javascript">
	$(function(){
		 
		var checkBool = false;
		 //点击新增按钮。
        $('#addBlog').click(function(){
               window.location.href="${ctx}/blog/addBlogInit";
        });
		 //加载登录人
        jQuery.ajax({
    		type:"POST",
    	 	url:"${ctx}/user/getUser", 
    	 	data:"",
    		dataType:"json",
    		success:function(data){
    			 var nickName = data.nickName;
    				if( typeof(nickName) != "undefined" &&  nickName != ""){
    					$("#nickName").append(nickName);
    				} 
    			}
    	 	});
	        //如果是必填的，则加红星标识.
	        $("form :input.required").each(function(){
	            var $required = $("<strong class='hight'>*</strong>"); //创建元素
	            $(this).prev().append($required); //然后将它追加到文档中
	        });
	        
	         //文本框失去焦点后
	        $('form :input').blur(function(){
	             var $parent = $(this).prev();
	             $parent.find(".formtips").remove();
	             //验证密码
	             if( $(this).is('#pwd') ){
	                if( this.value=="" ||  this.value.length < 6 || this.value.length > 100 ){
	                      var errorMsg = '密码长度要求在6-100个之间.';
	                      $parent.append('<span class="formtips onError hight">'+errorMsg+'</span>');
	                      $(this).parent().addClass("has-error");
	                     checkBool = true;
	                }else{
	                	if($("#repwd").val() !="" && $("#pwd").val() != $("#repwd").val()){
                		  var errorMsg = '两次密码输入不一致.';
 	                      $parent.append('<span class="formtips onError hight">'+errorMsg+'</span>');
 	                      $(this).parent().addClass("has-error");
 	                     checkBool = true;
                	 }else{
                		 $(this).parent().removeClass("has-error");
                		 checkBool = false;
                	 }
	                	
	                }
	             }
	             //验证重复密码
	             if( $(this).is('#repwd') ){
	                if( this.value=="" ||  this.value.length < 6 || this.value.length > 100 ){
	                      var errorMsg = '密码长度要求在6-100个之间.';
	                      $parent.append('<span class="formtips onError hight">'+errorMsg+'</span>');
	                      $(this).parent().addClass("has-error");
	                     checkBool = true;
	                }else{
	                	 
	                	if($("#pwd").val() !="" && $("#pwd").val() != $("#repwd").val()){
                		  var errorMsg = '两次密码输入不一致.';
 	                      $parent.append('<span class="formtips onError hight">'+errorMsg+'</span>');
 	                      $(this).parent().addClass("has-error");
 	                     checkBool = true;
                	 }else{
	                	$(this).parent().removeClass("has-error");
	                	 checkBool = false;
                	 }
	                }
	             }
	        }).keyup(function(){
	           $(this).triggerHandler("blur");
	        }).focus(function(){
	            $(this).triggerHandler("blur");
	        });//end blur
	        //提交，最终验证。
	         $('#send').click(function(){
	                $("form :input.required").trigger('blur');
	                save();
	         });

	         function save(){
	             	$("#oldPwd").val(faultylabs.MD5($("#oldPwd").val()));
	             	$("#pwd").val(faultylabs.MD5($("#pwd").val()));
            		$("#repwd").val(faultylabs.MD5($("#repwd").val()));
		        	//校验成功保存
	            	 jQuery.ajax({
							type:"POST",
						 	url:"${ctx}/user/updPassword", 
						 	data:"oldpwd="+$("#oldPwd").val()+"&newpwd="+$("#pwd").val()+"&repwd="+$("#repwd").val()  ,
							dataType:"json",
							success:function(data){
									alert(data.msg);
					             	$("#oldPwd").val("");
					             	$("#pwd").val("");
				            		$("#repwd").val("");

								}
						 	});
		         }
	          //异步加载博客分类和博客
	      	 jQuery.ajax({
	  			type:"POST",
	  		 	url:"${ctx}/classify/selClassifyAjax", 
	  		 	data:'',
	  			dataType:"json",
	  			success:function(data){
	  				 if(typeof(data) != undefined){
	  					 	$.each(data,function(i){
	 					 		var liststr= "<a href='#'	class='list-group-item'>"+data[i].classify_note+"</a>";
	 					 		$("#classList").append(liststr);
	 						 });
	 					 }
	  				}
	  		 	});
	      	 jQuery.ajax({
	   			type:"POST",
	   		 	url:"${ctx}/blog/selBlogAjaxLimitN", 
	   		 	data:'',
	   			dataType:"json",
	   			success:function(data){
	   				 if(typeof(data) != undefined){
	   					 	$.each(data,function(i){
	  					 		var liststr= "<a href='${ctx}/blog/selBlogView/"+data[i].bc_blog_id+".html'	class='list-group-item'>"+data[i].blog_title+" <span class='badge'>"+data[i].view_count+"</span></a>";
	  					 		$("#readList").append(liststr);
	  						 });
	  					 }
	   				}
	   		 	});
	});
	</script>
</body>
</html>
